iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 26
0
自我挑戰組

自我挑戰日記系列 第 26

CSS:column 瀑布流版型

  • 分享至 

  • xImage
  •  

大家好 /images/emoticon/emoticon37.gif

在20天的時侯有作到文章分欄
今天要以同樣的 column-count
作出瀑布流版型
https://ithelp.ithome.com.tw/upload/images/20171231/20107496QQSnbI5bk0.jpg

<div class="waterfall">
<div class="item">   <!-- 第一張卡片 -->
  <img src="http://via.placeholder.com/350x150">
  <p>1 convallis timestamp</p>
</div>
<div class="item">   <!-- 第二張卡片 -->
  <img src="http://via.placeholder.com/350x150">
  <p>2 convallis timestamp 2 Donec a fermentum nisi. </p>
</div>
<div class="item">   <!-- 第三張卡片 -->
  <img src="http://via.placeholder.com/350x350">
  <p>3 Nullam eget lectus augue. Donec eu sem sit amet ligula 
    faucibus suscipit.</p>
</div>
             .
             .
             .
             .
             .
</div>

HTML 用一個 div 作為外框
決定內容的欄數、間隔的值

全部的卡片都需放在外框的 div 之中
當要增加每張卡片時
只要重複下面

<div class="item">
  <img src="圖片">
  <p>內文</p>
</div>

接下來是 CSS 的外框部分

.waterfall{
  width: 75%;
  margin: 0 auto;
  column-count: 5; <!-- 欄數 -->
  column-gap: 15px; <!-- 每欄間隔 -->
}

--- 明日待續。


上一篇
CSS:background-blend-mode 背景混合模式
下一篇
HTML:table 表格
系列文
自我挑戰日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言